<template>
  <div class="app-container">
    <div class="user-left">
      <el-tabs v-model="activeName" class="tabs" tab-position="left" @tab-click="handleClick">
        <!-- <el-tab-pane label="资料设置" name="setting">资料设置</el-tab-pane> -->
        <el-tab-pane label="修改密码" name="password">修改密码</el-tab-pane>
        <!-- <el-tab-pane label="登录记录" name="login">登录记录</el-tab-pane>
        <el-tab-pane label="系统通知" name="system">系统通知</el-tab-pane> -->
      </el-tabs>

    </div>
    <div>
      <Setting v-if="activeName === 'setting'" />
      <Password v-if="activeName === 'password'" />
    </div>
  </div>
</template>
<script>
import Setting from './setting.vue'
import Password from './password.vue'
export default {
  components: {
    Setting,
    Password
  },
  data() {
    return {
      activeName: 'setting'
    }
  },
  mounted() {
    console.log(this.$route.name)
    if (this.$route.name === 'Baseinfo') {
      this.activeName = 'setting'
    } else {
      this.activeName = 'password'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style scoped>
.app-container {
  display: flex;
}
.user-left {
  width: 180px;
  height: 100vh;
  background-color: #fcfcfc;

}
::v-deep .el-tabs--left .el-tabs__header.is-left {
  width: 100%;
}
::v-deep .el-tabs--left .el-tabs__item.is-left {
  text-align: center;
}
::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  /* text-align: center; */
}
::v-deep .el-tabs__item.is-active {
  background: #e9f2fc;
  /* opacity: 1; */
}
</style>
